<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="styles/icon/iconfont.css"/>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">

    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>博客管理</template>
                    <el-menu-item-group>
                        <template slot="title">博客分类管理</template>
                        <el-menu-item index="2-1">分类列表</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="博客管理">
                        <el-menu-item index="2-3">博客列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>新增</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>

                <el-row>
                    <el-button type="success" @click="openForm">新增</el-button>
                </el-row>

                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="blogId"
                            label="id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="标题"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="categoryName"
                            label="分类名"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="author"
                            label="作者"
                            width="180">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">

                            <el-button type="primary" icon="el-icon-edit" circle
                                       @click="edit(scope.row)">

                            </el-button>
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="del(scope.row.blogId)">
                            </el-button>
                            </template>
                    </el-table-column>

                </el-table>
            </el-main>

            <div class="block">
                <el-pagination
                        layout="prev, pager, next"
                        :total="100">
                </el-pagination>
            </div>

            <el-dialog
                    title="新增博客"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <el-form ref="form" :model="form" label-width="80px">

                    <el-form-item label="标题">
                        <el-input v-model="form.title" placeholder="标题不能超过50个字"></el-input>
                    </el-form-item>

                    <el-form-item label="分类名">
                        <el-select v-model="form.categoryId" placeholder="请选择分类名">
                            <el-option
                                    v-for="item in categories"
                                    :key="item.categoryId"
                                    :label="item.categoryName"
                                    :value="item.categoryId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="作者">
                        <el-input v-model="form.author" placeholder="作者不能超过10个字"></el-input>
                    </el-form-item>

                    <el-form-item label="内容">
                        <el-input type="textarea" v-model="form.content"></el-input>
                    </el-form-item>

                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                </span>
            </el-dialog>


            <el-dialog
                    title="修改博客"
                    :visible.sync="dialogVisible2"
                    width="30%"
            >
                <el-form ref="form" :model="form" label-width="80px">

                    <el-form-item label="标题">
                        <el-input v-model="form.title" placeholder="标题不能超过50个字"></el-input>
                    </el-form-item>

                    <el-form-item label="分类名">
                        <el-select v-model="form.categoryId" placeholder="请选择分类名">
                            <el-option
                                    v-for="item in categories"
                                    :key="item.categoryId"
                                    :label="item.categoryName"
                                    :value="item.categoryId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="作者">
                        <el-input v-model="form.author" placeholder="作者不能超过10个字"></el-input>
                    </el-form-item>

                    <el-form-item label="内容">
                        <el-input type="textarea" v-model="form.content"></el-input>
                    </el-form-item>

                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2= false">取 消</el-button>
                    <el-button type="primary" @click="myUpdate">确 定</el-button>
                </span>
            </el-dialog>

        </el-container>
    </el-container>
</div>
</body>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="api/blog.js"></script>
<script src="api/category.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                categories:[],
                dialogVisible: false,
                dialogVisible2: false,
                form: {
                    blogId: null,
                    title: '',
                    categoryId: '',
                    author: '',
                    content: ''
                }
            }
        },
        mounted() {
            this._getBlogs()
        },
        methods: {
            openForm(){
                this.dialogVisible=true
                //0.发起请求获取所有的分类
                this._getCategories()
                //清空form
                this.form={}
            },
            add() {
                // if(this.form.blogId){
                //     console.log("有id走更新")
                //     this.myUpdate()
                //     return
                // }
                //
                //  this.form={}

                if(this.form.title==null){
                    console.log(222222)
                    this.$message({
                        type: 'error',
                        message: '标题为空，添加失败!'
                    });
                }

                if(this.form.content==null){
                    this.$message({
                        type: 'error',
                        message: '内容为空，添加失败!'
                    });
                }
                console.log(_getBlogs().res.data.title)
                if(this.form.title=== _getBlogs().res.data.flag){
                    this.$message({
                        type: 'error',
                        message: '标题重复，添加失败!'
                    });
                }

                //1.发起请求
                addBlog(this.form).then(res=>{
                    if (res.data.flag) {
                        //3.弹窗
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    }

                    //4.刷新页面
                    this._getBlogs()
                    //5.表单关闭
                    this.dialogVisible = false
                })
            },
            edit(row) {
                //打开弹窗
                this.dialogVisible2=true
                //请求所有的分类，用来填充分类下拉框
                this._getCategories()
                //请求博客数据，填充编辑页面
                this._getBlogById(row.blogId)
            },

            myUpdate(){
                updateBlog(this.form).then(res=>{
                    if (res.data.flag) {
                        //3.弹窗
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    }else {
                        this.$message({
                            type: 'error',
                            message: '修改信息有误，修改失败!'
                        });
                    }
                    console.log(res)
                    //刷新列表
                    this._getBlogs()
                    //关窗口
                    this.dialogVisible2=false
                })
            },
            del(id) {
                this.$confirm('此操作将删除该博客, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //真正删除动作
                    deleteBlog(id).then(res=>{
                        console.log(res)
                        if (res.data.flag){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else{
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                        //刷新列表
                        this._getBlogs()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            _getBlogs(){
                getAllBlogs().then(res => {
                    console.log(res)
                    if (res.data.flag) {
                        //拿后端返回的数据来更新上面的tableData
                        this.tableData = res.data.data
                    }
                })
            },
            _getCategories(){
                getAllCategories().then(res => {
                    console.log(res)
                    if (res.data.flag) {
                        //拿后端返回的数据来更新上面的categories
                        this.categories = res.data.data
                    }
                })
            },
            _getBlogById(id){
                findBlogById(id).then(res=>{
                    if(res.data.flag){
                        this.form=res.data.data
                    }
                })
            }
        }
    })
</script>

</html>